<template>
  <div class="w-page w-donate">
    <div class="w-head" :style="{backgroundImage: 'url(' + bgimg + ')' }">
      <p class="w-headcon flex vc">
        <span class="w-shu"></span>
        <span>捐赠项目</span>
      </p>
      <div class="w-inptbox">
        <van-cell-group>
          <van-field v-model="value" placeholder="输入项目关键字查询" right-icon="search"/>
        </van-cell-group>
      </div>

    </div>
    <div class="w-conbox">
      <div class="w-con">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-cell v-for="(item) in list" :key="item.id">
            <router-link :to="{path: 'donateItem', query: {id: item.id}}" class="w-item flex vc hb">
              <div class="w-right flex hb column">
                <div class="w-title flex vc">
                  <p class="w-dian"></p>
                  <p class="w-text">{{item.className}}</p>
                </div>
              </div>
            </router-link>
          </van-cell>
        </van-list>
      </div>

    </div>

  </div>
</template>

<script>
import { projectClassList } from '@/api/project'
import {
  List,
  Field
} from 'vant'

export default {
  components: {
    [List.name]: List,
    [Field.name]: Field
  },
  data () {
    return {
      bgimg: require('../assets/img/second/banner.png'),
      list: [],
      loading: false,
      finished: false,
      value: ''
    }
  },
  methods: {
    dataGet () {
      projectClassList().then(response => {
        this.list = response.data
        this.loading = false
        this.finished = true
        this.page += 1
      })
    },
    onLoad () {
      this.dataGet()
    }
  }
}
</script>
<style>
  .w-donate .w-conbox .van-cell {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .w-donate .w-inptbox .van-cell {
    padding-top: 6px;
    padding-bottom: 6px;
  }
</style>
<style scoped>
  .w-page {
    height: 100vh;
    width: 100vw;
    background: #E1E0DF;
  }

  .w-head {
    width: 100vw;
    height: 94px;
    background-size: cover;
    background-position: center;
    position: relative;
  }

  .w-shu {
    background: #F5D8BB;
    height: 18px;
    width: 2px;
    display: block;
    border-radius: 10px;
    margin: 0 10px;
  }

  .w-headcon {
    padding: 0 15px;
    padding-top: 17px;
    font-size: 18px;
    color: #fff;
  }

  .w-headcon span {
    display: block;
  }

  .w-conbox {
    width: 97vw;
    margin: 0 auto;
    margin-top: -20px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    padding: 12px;
    position: relative;
  }

  .w-con {
    height: 84vh;
    overflow: scroll;
  }

  .w-item {
    display: block;
  }

  .w-title {
    color: #313131;
    font-size: 17px;
  }

  .w-dian {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #CCA977;
    margin-right: 5px;
  }

  .w-text {
    width: 80vw;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .w-inptbox {
    width: 50vw;
    position: absolute;
    border-radius: 20px;
    overflow: hidden;
    right: 20px;
    font-size: 13px;
    top: 16px;
  }
</style>
